<template>
    <div class="contain" v-loading="loading">
        <tz-breadcrumb  :pathArr='[{"name": "场景管理"},{"name": "厨房管理", "url": "/cook"}]'></tz-breadcrumb>
        <div class="section-one-border">
            <el-row :gutter="10" class="section-one" style="margin-left:0px;margin-right:0px">
                <el-col :xs="20" :sm="20" :md="20" :lg="20" :xl="20" class="left">
                    <span>厨房管理</span>
                </el-col>
                <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                    <div class="grid-content text-right add-btn" @click="edit(1,'','')">
                        <i class="el-icon-plus"></i>添加厨房</div>
                </el-col>
            </el-row>
        </div>
        <!-- table -->
        <div class="main-contain">
            <div  class="s-list-title text-center" v-if="noInfo">----暂无厨房列表----</div>
            <div v-if="cookList != ''">
                <table class='pay-tb'>
                    <thead>
                        <tr>
                            <th>厨房名称</th>
                            <th>创建时间</th>
                            <th>连接设备名</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in cookList" :key="item.id">
                            <td>{{item.title}}</td>
                            <td>{{item.created_at}}</td>
                            <td>{{item.dyj}}</td>
                            <td><a class="delete-btn"  @click="edit(2,item.id,item.title)">编辑</a></td>
                        </tr>
                    </tbody>
                </table>
                <div class="text-center page-border">
                <div class="page-border-size">每页显示{{size}}条</div>
                <el-pagination v-if="total > size"
                @current-change="handleCurrentChange"
                background
                layout="prev, pager, next"
                :page-size="size"
                :total="total">
                </el-pagination>
                </div>
            </div>
        </div>
        <el-dialog title="厨房名称" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="厨房名称" :label-width="formLabelWidth">
                <el-input v-model="form.cookName" autocomplete="off"  placeholder="请输入厨房名称"></el-input>
                </el-form-item>
                <div v-show="restaurant_name_show" class="warn">*请正确填写厨房名称（只允许输入中英文及空格）</div>
            </el-form>
            <div slot="footer" class="dialog-footer text-center">
                <el-button    v-if="isShowDelete" @click="deleteCook">删除</el-button>
                <el-button type="primary" @click="sureClick">确 定</el-button>
            </div>
        </el-dialog>
        
    </div>
</template>
<script>
import api from './../../api/api';
import http from './../../config/index';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb'

export default {
    components: {
        'tz-breadcrumb': tzBreadcrumb,
    },
    data () {
      return {
        page:1,
        size:10,
        total:0,
        form: {
          cookName: '',
        },
        formLabelWidth: '70px',
        dialogFormVisible:false,
        cookList:[],
        isShowDelete: false,
        currentId:'',
        loading:false,
        noInfo:false,
        // 餐厅名称警告显示
        restaurant_name_show: false,
      }
    },
    methods:{
        // 编辑操作
        edit(val,id,title){
            let that = this;
            that.dialogFormVisible = true;
            // val 1为添加厨房，二为编辑厨房
            if(val == 1) {
              that.isShowDelete = false;
              that.form.cookName = '';
            } else {
              that.isShowDelete = true;
              that.currentId = id;
              that.form.cookName = title;
            } 
        },
        // 确认点击事件
        sureClick() {
          let that = this;
          if(that.form.cookName == '') {
            this.$message({
                type: 'info',
                message: '请输入厨房名称'
            });
            return false;
          }
          //   that.isShowDelete false 为添加餐厅，true为编辑餐厅
          if(that.isShowDelete == false) {
            this.$confirm('确认添加吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
                }).then(() => {
                    that.loading = true;
                    // 添加餐厅接口
                    http.get(api.kitchenAdd, {
                        title: that.form.cookName,
                        seller_id: localStorage.getItem("seller_id")
                    }, (res) => {
                    console.log(res);
                    //   关闭弹框
                    that.dialogFormVisible = false;
                    that.loading = false;
                    if(res.code == '10001') {
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                        //   重新获取列表
                        that.getCookList();
                    }else {
                        this.$message({
                            type: 'info',
                            message: res.msg
                        });
                    }
                    
                    }, () => {
                    that.loading = false;
                    console.log('网络错误');
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消添加厨房'
                    });
                    that.loading = false;
            
            }); 
            
            
          } else {
            that.$confirm('确认修改该餐厅名吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
                }).then(() => {
                    that.loading = true;
                    // 添加餐厅接口
                    http.get(api.kitchenEdit, {
                        title: that.form.cookName,
                        seller_id: localStorage.getItem("seller_id"),
                        id:that.currentId
                    }, (res) => {
                    console.log(res);
                    //   关闭弹框
                    that.dialogFormVisible = false;
                    that.loading = false;
                    if(res.code == '10001') {
                        this.$message({
                            type: 'success',
                            message: '修改厨房名成功!'
                        });
                        //   重新获取列表
                        that.getCookList();
                    }else {
                        this.$message({
                            type: 'info',
                            message: res.msg
                        });
                        that.loading = false;
                    }
                    
                    }, () => {
                    that.loading = false;
                    console.log('网络错误');
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消修改厨房'
                    });
                    that.loading = false;
            
            }); 

          }
        },
        // 获取厨房列表
        getCookList() {
            let that = this;
            that.loading = true;
            http.get(api.kitchenList, {
                seller_id: localStorage.getItem("seller_id"),
                current_page:that.page,
                perpage:that.size
            }, (res) => {
              console.log(res);
              that.loading = false;
              if(res.data.data == ''){
                  that.noInfo = true
              } else {
                  that.noInfo = false
              }
              if(res.code = '10001') {
                that.cookList = res.data.data;
                that.total = res.data.total;
                console.log(res.data.last_page);
              } else {
                that.$message({
                   type: 'info',
                   message: res.msg 
                })
              }
            }, () => {
            console.log('网络错误');
            that.loading = false;
            });
        },
        // 页码点击事件
        handleCurrentChange (val) {
            this.page = val;
            this.getCookList();
        },
        // 删除
        deleteCook() {
            let that = this;
            that.$confirm('确认删除该厨房吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
                }).then(() => {
                    that.loading = true;
                    // 添加餐厅接口
                    http.get(api.kitchenDel, {
                        seller_id: localStorage.getItem("seller_id"),
                        id:that.currentId
                    }, (res) => {
                    console.log(res);
                    //   关闭弹框
                    that.dialogFormVisible = false;
                    that.loading = false;
                    if(res.code == '10001') {
                        this.$message({
                            type: 'success',
                            message: '删除厨房成功!'
                        });
                        //   重新获取列表
                        that.getCookList();
                    }else {
                        this.$message({
                            type: 'info',
                            message: res.msg
                        });
                    }
                    
                    }, () => {
                    that.loading = false;
                    console.log('网络错误');
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                    that.loading = false;
            
            }); 
           
        }
    },
    watch: {
        // 监听厨房名称
        'form.cookName' : function (newval,oldval) {
            var pattern = /^[\u4E00-\u9FA5A-Za-z0-9\s]{2,20}$/;
            // str = '';
            console.log(pattern.test(oldval));
            if(pattern.test(oldval)){
                console.log(33);
                this.restaurant_name_show = true;
            }else{
                this.restaurant_name_show = false;
                console.log(44);
            }
            this.restaurant_name = newval.replace(pattern,'');
        }
    },
    mounted ()  {
      console.log(5555);
      var that = this;
      // 餐厅列表接口获取
      that.getCookList();
  
    },
    
}
</script>
<style scoped>
.section-one {
    background: #fff;
    line-height: 50px;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #333;
    font-size: 16px;
    margin-top: 10px;   
}
.section-one,.main-contain{
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.06);
    -o-box-shadow: 0 1px 3px rgba(0,0,0,.06);
    -ms-box-shadow: 0 1px 3px rgba(0,0,0,.06);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,.06);
    margin-top:10px;
}
.section-one .left{
    font-size:16px;
    font-weight: bold;
}
.add-btn{
    width: 90px;
    float: right;
    color: #FF6F2E;
    font-size: 16px;
    margin-right: 10px;
    cursor: pointer;
}
.main-contain {
    padding:20px 20px 50px 20px;
    box-sizing: border-box

}
.pay-tb {
    border-collapse: collapse;
    width: 100%;
}
.pay-tb th {
    text-align: left;
    color: #333;
    font-size:16px;
}
.pay-tb td{
   color: #666; 
   font-size:14px;
}
.pay-tb tr{
    border-bottom:1px solid #e7e7e7;
}
.pay-tb td, .pay-tb th {
    height: 40px;
    /* border: 1px solid violet; */
}
.delete-btn{
    color:#586EA1;
    cursor: pointer;
}
.page-border{
    margin-top:40px;
    position: relative;
    padding-left:100px;
    box-sizing: border-box
}
.page-border-size{
    position: absolute;
    left:0px;
    top:0px;
    line-height:30px;
    font-size:14px;
    color:#666;
    width:90px;
}
.warn {
  padding-left: 83px;
  color: #FF1818;
  font-size: 14px;
}
.s-list-title {
  color:#999;
  margin-bottom:5px;
  font-size:14px;
  width:100%
}
</style>
